<template>
  <a-row class="task_box">
    <a-col :span="24" class="header_col">
      <div class="task_list_left_top_name">
        <div class="icon_box">
          <i class="iconfont icon-yueyongdianliangbili"></i>
        </div>

        <div class="name">新建核算任务</div>
      </div>
      <div class="header_task_input_box"></div>
    </a-col>
    <a-col :span="24" v-if="visible">
      <a-col class="task_box_title" :span="24"> 新建 </a-col>
      <a-col :span="4" class="task_frame" @click="newTask()">
        <div class="task_frame_box">
          <div class="" style="font-size: 60px">+</div>
        </div>
      </a-col>

      <a-col :span="24" class="task_box_title">草稿箱</a-col>

      <a-col
        :span="4"
        class="task_frame"
        v-for="(item, index) in 7"
        :key="index"
      >
        <div class="task_frame_box" @click="test">
          <div class="">任务草稿{{ index + 1 }}</div>
        </div>
      </a-col></a-col
    >
    <!-- 新建内容 基于设施-->
    <ReleaseTask ref="taskForm" @ok="toNewTask"></ReleaseTask>
  </a-row>
</template>

<script>
import { ListMixin } from "@/mixins/ListMixin";
import TaskModal from "./Task/TaskModal.vue";
import AddTask from "./Task/addTask.vue";
import ReleaseTask from "./Task/ReleaseTask.vue";
import Preview from "./Task/Preview.vue";
export default {
  mixins: [ListMixin],
  data() {
    return {
      visible: true,
      showPreview: false,
      queryParam: {
        standard: "1",
        period: "",
      },
    };
  },
  components: {
    AddTask,
    TaskModal,
    Preview,
    ReleaseTask,
  },
  mounted() {
    this.loadData();
  },
  methods: {
    test() {
      this.$refs.modalForm.visible = true;
    },
    loadData() {},
    toNewTask() {
      this.$router.push('/accounting/taskpage?taskId=123456')
      // this.visible = false;
      // this.$refs.modalForm.visible = true;
    },
    newTask() {
      this.$refs.taskForm.visible = true;
    },
    addTask() {},
    close() {
      this.showPreview = false;
    },
    generatinAaccountingTaskFun() {
      this.showPreview = true;
    },
    addFacility() {
      this.$refs.addTaskModal.visible = true;
    },
    openFacilityFun(accountingIndx, facilityIdx) {
      this.accountingTaskData[accountingIndx].itemAccounting[
        facilityIdx
      ].isShow =
        !this.accountingTaskData[accountingIndx].itemAccounting[facilityIdx]
          .isShow;
    },
    deleteFacilityObj(scopeIdx, accountingIndx, facilityIdx) {
      this.accountingTaskData[scopeIdx].itemAccounting[
        accountingIndx
      ].facilityList.splice(facilityIdx, 1);
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/assets/css/scrollbar.scss";
@import "@/assets/css/task.scss";
.task_box {
  // background: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  //   height: 100%;
  background: #fff;
  overflow-y: hidden;
  .header_col {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-shadow: 2px 2px 10px #ccc;
    margin-bottom: 8px;
    padding: 10px 10px;
    .task_list_left_top_name {
      display: flex;
      flex-direction: row;
      align-items: center;
      .icon_box {
        width: 40px;
        height: 40px;
        background: #4bc076;
        border-radius: 5px;
        i {
          color: #fff;
          font-size: 26px;
        }
      }

      .name {
        margin-left: 6px;
        font-size: 18px;
        font-weight: 600;
      }
    }
    .header_task_input_box {
      display: flex;
      flex-direction: row;
    }
  }

  .column {
    height: calc(100% - 40px);
    //

    padding: 0px 10px;
    border-radius: 5px;
    .column_box {
      // padding: 20px;
      height: 100%;
      display: flex;
      flex-direction: column;
      border-radius: 5px;

      .title {
        height: 40px;
        line-height: 40px;
        padding: 0 10px;
        // padding: px 10px;
        margin-bottom: 2px;
        border-radius: 5px;

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        .header {
          font-size: 14px;
          color: #000;
          font-weight: 600;
          padding: 0;
          cursor: pointer;
        }
        .text {
          text-align: left;
          font-size: 12px;
          color: #666;
        }
      }
      ul {
        flex: 1;
        overflow-y: auto;
        .accounting_li {
          padding: 16px 40px 26px;
          display: flex;
          flex-direction: column;
          background: #fff;
          margin-bottom: 6px;
          border-radius: 5px;
          border: 2px solid #f3f3f3;
          box-shadow: 2px 2px 10px rgba(126, 126, 126, 0.2);
          .accounting_li_box {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;

            .icon {
              position: relative;
              width: 50px;
              height: 50px;
              border-radius: 5px;
              box-shadow: 2px 10px 10px rgba(250, 71, 71, 0.2);
              // background: rgba(250, 71, 71, 1);
              display: flex;
              align-items: center;
              justify-content: center;
              i {
                color: #fff;
                font-size: 32px;
              }
              ::before {
                position: absolute;
                top: 13px;
                left: 2px;
              }
              ::after {
                filter: blur(1.5px); /*滤镜*/
                position: absolute;
                width: 100%;
                height: 100%;
                left: -8px;
                top: 8px;
                content: "";
                background: rgba(255, 255, 255, 0.5);
                border-radius: 5px;
                border: 2px solid rgb(252, 250, 250);
                box-shadow: -4px 10px 10px rgba(250, 71, 71, 0.2);
              }
            }
          }
          .accounting_text {
            margin-left: 20px;
            flex: 1;
            text-align: left;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;

            p {
              font-size: 14px;
              font-weight: 600;
              margin-bottom: 8px;
            }
            .active_show {
              transition: 0.2s;
              background: rgb(240, 236, 236);
            }
            .right {
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 2px;
              cursor: pointer;
              border-radius: 4px;
              &:hover {
                transition: 0.2s;
                background: rgb(240, 236, 236);
              }
              span {
                font-size: 12px;
                color: #333;
                margin-right: 6px;
              }
              .active_show_btn {
                transition: 0.2s;
                transform: rotate(90deg);
              }
              i {
                transition: 0.2s;
                transform: rotate(0deg);
                font-size: 12px;
                color: #8d929f;
              }
            }
            .accounting_right_add {
              i {
                font-size: 26px;
              }
            }
          }
          .facility_box {
            border-top: 1px dashed #ccc;
            padding-top: 10px;
            margin-top: 30px;
            display: flex;
            flex-direction: column;
            .facility_box_title {
              text-align: left;
              margin-bottom: 12px;
              font-size: 14px;
              i {
                margin-right: 4px;
              }
            }
            .facility {
              padding-left: 12px;
              border-left: 1px solid #ccc;
              text-align: left;
              color: #999;
              font-size: 12px;
              li {
                padding: 4px 0;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                i {
                  font-size: 10px;
                  color: #ccc;
                }
              }
            }
          }
        }
      }
    }
  }
}
.preview_box {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  z-index: 99;
}
.preview_box_event_none {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  z-index: 99;
}
.preview_panel_overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: hsla(0, 0%, 97.6%, 0.8);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.3s;
}
.preview_panel_overlay_opacity {
  opacity: 1 !important;
}
.preview_position {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fff;
  width: 450px;
  position: absolute;
  top: 0px;
  right: 0;
  bottom: 0;
  padding: 22px 0px 22px 40px;
  transform: translateX(100%);
  z-index: 99;
  transition: transform 0.3s;
  color: #262a2f;
}
.preview_position_transform100 {
  transform: translateX(0%) !important;
}
</style>